<template>
  <a-card class="general-card">
    <a-form v-model="checkForm" class="formHeader">
      <a-row justify="start" :gutter="24">
        <a-col class="formHeader-criteria">
          <a-row :gutter="16">
            <a-col span="8">
              <a-form-item label="单别" label-col-flex="80px">
                <a-input v-model="checkForm.single" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="单号" label-col-flex="80px">
                <a-input v-model="checkForm.odd" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="品号" label-col-flex="80px">
                <a-input v-model="checkForm.ph" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="品名" label-col-flex="80px">
                <a-input v-model="checkForm.pm" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="工艺" label-col-flex="80px">
                <a-input v-model="checkForm.gy" allow-clear/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col class="formHeader-btn">
          <a-space direction="vertical" :size="20">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-loop />
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <!-- 用户显示区域 -->
    <div class="userArea">
      <vxe-table
          ref="tableRef"
          :data="data"
          size="mini"
          height="100%"
          :loading="loadingFlag"
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :expand-config="expandConfig"
          stripe
          border
          show-overflow
          resizable
      >
        <vxe-column type="expand"  field="ta001" title="单别" min-width="100" sortable>
          <template #default="{row}">
            <span>{{row.ta001}}</span>
          </template>
          <template #content="{row}">
            <div class="expandWrapper">
              <vxe-table
                  :data="row.sonList">
                <vxe-column field="zgx" title="子工序" width="120" align="center"></vxe-column>
                <vxe-column field="zgy" title="工艺编号" width="120" align="center"></vxe-column>
                <vxe-column field="zgymc" title="工艺名称" width="120" align="center"></vxe-column>
              </vxe-table>
            </div>

          </template>
        </vxe-column>
        <vxe-column field="ta002" title="单号" align="center" min-width="120" sortable></vxe-column>
        <vxe-column field="ta027" title="订单号" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta006" title="产品品号" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta034" title="产品品名" min-width="170" align="center" sortable></vxe-column>
        <vxe-column field="ta035" title="产品规格" align="center" min-width="170" sortable></vxe-column>
        <vxe-column field="ta003" title="工序" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta004" title="工艺" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="name" title="工艺名称" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta005" title="工艺性质" min-width="100" align="center" sortable></vxe-column>
        <vxe-column field="ta007" title="单位" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta015" title="预计产量" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="kgtime" title="开工时间" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="num" title="已派数量" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="ta011" title="状态值" min-width="100" align="center" sortable>
          <template #default="{row}">
            <span>{{row.ta011=='1'?'未生产':row.ta011=='2'?'已发料':row.ta011=='3'?'生产中':''}}</span>
          </template>
        </vxe-column>
        <vxe-column field="ta064" title="部门编号" align="center" min-width="100" sortable></vxe-column>
        <vxe-column field="dname" title="部门名称" min-width="100" align="center" sortable></vxe-column>
        <vxe-column field="gz" title="供应商名称" align="center" min-width="100" sortable></vxe-column>
        <vxe-column title="操作" align="center" fixed="right" width="150">
          <template #default="{ row, rowIndex }">
            <a-space>
              <a-button type="primary" size="mini" @click="toDetail(row)">查看</a-button>
              <a-button type="primary" size="mini" status="success" @click="dispatch(row)">派工</a-button>
            </a-space>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="getTable">
    </vxe-pager>
  </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './workshopDispatchReporting.ts';

export default {
  setup() {
    const {
      base,
      getTable,
      reset,
      toDetail,
      dispatch,
      search,
      expandConfig,
    } = importConfig();
    return {
      ...toRefs(base),
      getTable,
      reset,
      toDetail,
      dispatch,
      search,
      expandConfig,
    };
  },
};
</script>

<style lang="less" scoped>
.formHeader {
  &-criteria {
    flex: 1 1 0;
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}

.add-user-btn {
  display: flex;
}

.userArea {
  height: calc(100vh - 385px);
  margin: 10px 0;
}

.expandWrapper{
  padding: 10px;
}

</style>
